<template>
  <div>
    <div class="wrapper">
      <div class="position">
        <span class="iconfont position__icon">&#xe62f;</span>
        北京理工大学国防科技园2号楼10层北京理工大学国防科技园2号楼10层
        <span class="iconfont position__notice">&#xecaa;</span>
      </div>
      <div class="search">
        <span class="iconfont">&#xe65f;</span>
        <span class="search__text">山姆会员商店优惠商品</span>
      </div>
      <div class="banner">
        <img class="banner__img" src="http://www.dell-lee.com/imgs/vue3/banner.jpg" />
      </div>
      <div class="icons">
        <div class="icons__item">
          <img
            class="icons__item__img"
            src="http://www.dell-lee.com/imgs/vue3/超市.png"
          />
          <p class="icons__item__desc">超市便利</p>
        </div>
        <div class="icons__item">
          <img
            class="icons__item__img"
            src="http://www.dell-lee.com/imgs/vue3/菜市场.png"
          />
          <p class="icons__item__desc">菜市场</p>
        </div>
        <div class="icons__item">
          <img
            class="icons__item__img"
            src="http://www.dell-lee.com/imgs/vue3/水果店.png"
          />
          <p class="icons__item__desc">水果店</p>
        </div>
        <div class="icons__item">
          <img
            class="icons__item__img"
            src="http://www.dell-lee.com/imgs/vue3/鲜花.png"
          />
          <p class="icons__item__desc">鲜花绿植</p>
        </div>
        <div class="icons__item">
          <img
            class="icons__item__img"
            src="http://www.dell-lee.com/imgs/vue3/医药健康.png"
          />
          <p class="icons__item__desc">医药健康</p>
        </div>
        <div class="icons__item">
          <img
            class="icons__item__img"
            src="http://www.dell-lee.com/imgs/vue3/家居.png"
          />
          <p class="icons__item__desc">家居时尚</p>
        </div>
        <div class="icons__item">
          <img
            class="icons__item__img"
            src="http://www.dell-lee.com/imgs/vue3/蛋糕.png"
          />
          <p class="icons__item__desc">烘培蛋糕</p>
        </div>
        <div class="icons__item">
          <img
            class="icons__item__img"
            src="http://www.dell-lee.com/imgs/vue3/签到.png"
          />
          <p class="icons__item__desc">签到</p>
        </div>
        <div class="icons__item">
          <img
            class="icons__item__img"
            src="http://www.dell-lee.com/imgs/vue3/大牌免运.png"
          />
          <p class="icons__item__desc">大牌免运</p>
        </div>
        <div class="icons__item">
          <img
            class="icons__item__img"
            src="http://www.dell-lee.com/imgs/vue3/红包.png"
          />
          <p class="icons__item__desc">红包套餐</p>
        </div>
      </div>
      <div class="gap"></div>
      <div class="nearby">
        <h3 class="nearby__title">附近店铺</h3>
        <div class="nearby__item">
          <img src="http://www.dell-lee.com/imgs/vue3/红包.png" class="nearby__item__img" />
          <div class="nearby__content">
            <div class="nearby__content__title">沃尔玛</div>
            <div class="nearby__content__tags">
              <span class="nearby__content__tag">月售1万+</span>
              <span class="nearby__content__tag">起送¥0</span>
              <span class="nearby__content__tag">基础运费¥5</span>
            </div>
            <p class="nearby__content__highlight">VIP尊享满89元减4元运费券（每月3张）</p>
          </div>
        </div>
        <div class="nearby__item">
          <img src="http://www.dell-lee.com/imgs/vue3/红包.png" class="nearby__item__img" />
          <div class="nearby__content">
            <div class="nearby__content__title">沃尔玛</div>
            <div class="nearby__content__tags">
              <span class="nearby__content__tag">月售1万+</span>
              <span class="nearby__content__tag">起送¥0</span>
              <span class="nearby__content__tag">基础运费¥5</span>
            </div>
            <p class="nearby__content__highlight">VIP尊享满89元减4元运费券（每月3张）</p>
          </div>
        </div>
        <div class="nearby__item">
          <img src="http://www.dell-lee.com/imgs/vue3/红包.png" class="nearby__item__img" />
          <div class="nearby__content">
            <div class="nearby__content__title">沃尔玛</div>
            <div class="nearby__content__tags">
              <span class="nearby__content__tag">月售1万+</span>
              <span class="nearby__content__tag">起送¥0</span>
              <span class="nearby__content__tag">基础运费¥5</span>
            </div>
            <p class="nearby__content__highlight">VIP尊享满89元减4元运费券（每月3张）</p>
          </div>
        </div>
        <div class="nearby__item">
          <img src="http://www.dell-lee.com/imgs/vue3/红包.png" class="nearby__item__img" />
          <div class="nearby__content">
            <div class="nearby__content__title">沃尔玛</div>
            <div class="nearby__content__tags">
              <span class="nearby__content__tag">月售1万+</span>
              <span class="nearby__content__tag">起送¥0</span>
              <span class="nearby__content__tag">基础运费¥5</span>
            </div>
            <p class="nearby__content__highlight">VIP尊享满89元减4元运费券（每月3张）</p>
          </div>
        </div>
        <div class="nearby__item">
          <img src="http://www.dell-lee.com/imgs/vue3/红包.png" class="nearby__item__img" />
          <div class="nearby__content">
            <div class="nearby__content__title">沃尔玛</div>
            <div class="nearby__content__tags">
              <span class="nearby__content__tag">月售1万+</span>
              <span class="nearby__content__tag">起送¥0</span>
              <span class="nearby__content__tag">基础运费¥5</span>
            </div>
            <p class="nearby__content__highlight">VIP尊享满89元减4元运费券（每月3张）</p>
          </div>
        </div>
      </div>
    </div>
    <div class="docker">
      <div class="docker__item docker__item--active">
        <div class="iconfont">&#xe665;</div>
        <div class="docker__title">首页</div>
      </div>
      <div class="docker__item">
        <div class="iconfont">&#xe607;</div>
        <div class="docker__title">购物车</div>
      </div>
      <div class="docker__item">
        <div class="iconfont">&#xe610;</div>
        <div class="docker__title">订单</div>
      </div>
      <div class="docker__item">
        <div class="iconfont">&#xe609;</div>
        <div class="docker__title">我的</div>
      </div>
    </div>
    </div>
</template>

<style lang="scss">
@import './style/viriables.scss';
@import './style/mixins.scss';

.wrapper {
  overflow-y: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: .5rem;
  right: 0;
  padding: 0 .18rem .15rem .18rem;
}

.position {
  position: relative;
  padding: .16rem .24rem .16rem 0;
  line-height: .22rem;
  font-size: .16rem;
  @include ellipsis;   // mixins.scss
  .position__icon {
    position: relative;
    top: .01rem;
    font-size: .2rem;
  }
  .position__notice {
    position: absolute;
    right: 0;
    top: .17rem;
    font-size: .2rem;
  }
  color: $content-fontcolor;
}

.search {
  margin-bottom: .12rem;
  line-height: .32rem;
  background: #F5F5F5;
  color: #B7B7B7;
  border-radius: .16rem;
  .iconfont {
    display: inline-block;
    font-size: .16rem;
    padding: 0 .08rem 0 .16rem;
  }
  &__text {
    display: inline-block;
    font-size: .14rem;
  }
}

.banner {
  height: 0;
  overflow: hidden;
  padding-bottom: 25.4%; // 按图片高宽比(高度)未加载前撑开，防抖动
  &__img {
    width: 100%;
  }
}

.icons {
  display: flex;
  flex-wrap: wrap; //让弹性盒元素在必要的时候拆行：
  margin-top: .16rem;
  &__item {
    width: 20%;
    &__img {
      display: block;
      width: .4rem;
      height: .4rem;
      margin:0 auto;
    }
    &__desc {
      margin: .06rem 0 .16rem 0;
      text-align: center;
      color: $content-fontcolor;
    }
  }
}

.gap {
  margin: 0 -.18rem;
  height: .1rem;
  background: $content-bgColor;
}

.nearby {
  &__title {
    margin: .16rem 0 .02rem 0;
    font-size: .18rem;
    font-weight: normal;
    color: $content-fontcolor;
  }
  &__item {
    display: flex;
    padding-top: .12rem;
    &__img {
      margin-right: .16rem;
      width: .56rem;
      height: .56rem;
    }
  }
  &__content {
    flex: 1;
    padding-bottom: .12rem;
    border-bottom: .01rem solid $content-bgColor;
    &__title {
      line-height: .22rem;
      font-size: .16rem;
      color: $content-fontcolor;
    }
    &__tags {
      margin-top: .08rem;
      line-height: .18rem;
      font-size: .13rem;
      color: $content-fontcolor;
    }
    &__tag {
      margin-right: .16rem;
    }
    &__highlight {
      margin: .08rem 0 0 0;
      line-height: .18rem;
      font-size: .13rem;
      color: #E93B3B;
    }
  }
}

.docker {
  display: flex;
  //box-sizing 定义如何计算一个元素的总宽度和总高度，是否包含内边距和边框
  box-sizing: border-box;  //border-box 总宽度和总高度包含内边距(padding)和边框
  position: absolute;
  padding: 0 .18rem;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  border-top: .01rem solid $content-bgColor;
  color: $content-fontcolor;
  &__item {  // & 表示上一级的父级.docker
    flex: 1;  //让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容
    text-align: center;
    .iconfont {
        margin: .07rem 0 .02rem 0;
        font-size: .18rem;  // 18px
    }
    &--active { // & 表示上一级的父级 (docker_item--active)
      color: #1FA4FC;
    }
  }
  &__title {
    font-size: .2rem;
    transform: scale(.5, .5); // 网页最小显示12px，想要10px就横向和纵向各缩小50%
    transform-origin: center top; // 以中间，顶部位置为缩放中心点
  }
}

</style>
